<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex flex-center pt-40px pb-40px">
            <div class="flex video-set-menu">
                <div class="item">
                    <div class="flex flex-center title">基础套餐</div>
                    <div class="pt-30px pb-30px text-16px text-center"><b>20</b> 条精美视频制作</div>
                    <div class="pb-10px text-center"><button>立即开通</button></div>
                    <div class="pl-30px pr-30px">
                        <el-divider border-style="dashed">
                        套餐内容
                        </el-divider>
                    </div>
                    <ul>
                        <li>专业剪辑师,纯人工制作</li>
                        <li>贴片/特效/调色/字幕/音乐配音等</li>
                        <li>杜绝模板,规避封号限流等风险</li>
                        <li>合规审查,避免侵权/违法广告法等潜在风险</li>
                        <li>植入标签&话题等/布局关键词等</li>
                        <li>优化机器识别/搜索优先推荐等关联属性</li>
                    </ul>
                </div>
                <div class="item">
                    <div class="flex flex-center title">标准套餐</div>
                    <div class="pt-30px pb-30px text-16px text-center"><b>30</b> 条精美视频制作</div>
                    <div class="pb-10px text-center"><button>立即开通</button></div>
                    <div class="pl-30px pr-30px">
                        <el-divider border-style="dashed">
                        套餐内容
                        </el-divider>
                    </div>
                    <ul>
                        <li>专业剪辑师,纯人工制作</li>
                        <li>贴片/特效/调色/字幕/音乐配音等</li>
                        <li>杜绝模板,规避封号限流等风险</li>
                        <li>合规审查,避免侵权/违法广告法等潜在风险</li>
                        <li>植入标签&话题等/布局关键词等</li>
                        <li>优化机器识别/搜索优先推荐等关联属性</li>
                    </ul>
                </div>
                <div class="item">
                    <div class="flex flex-center title">旗舰套餐</div>
                    <div class="pt-30px pb-30px text-16px text-center"><b>50</b> 条精美视频制作</div>
                    <div class="pb-10px text-center"><button>立即开通</button></div>
                    <div class="pl-30px pr-30px">
                        <el-divider border-style="dashed">
                        套餐内容
                        </el-divider>
                    </div>
                    <ul>
                        <li>专业剪辑师,纯人工制作</li>
                        <li>贴片/特效/调色/字幕/音乐配音等</li>
                        <li>杜绝模板,规避封号限流等风险</li>
                        <li>合规审查,避免侵权/违法广告法等潜在风险</li>
                        <li>植入标签&话题等/布局关键词等</li>
                        <li>优化机器识别/搜索优先推荐等关联属性</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.video-set-menu{
    .item{
        width: 330px;
        height: 455px;
        margin: 0 15px;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgb(0 0 0 / 10%);
        overflow: hidden;
        .title{
            height: 66px;
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            background-color: #25bc6d;
            position:relative;
            &::before{
                content:'';
                width: 100%;
                height: 100%;
                position:absolute;
                top:0;
                left: 0;
                z-index: 1;
                background:url('@/assets/images/video-set-menu.png') no-repeat 0 0;
                background-size: cover;
            }
        }
        div{
            &>b{
                font-size: 22px;
                font-family: 'DIN Web';
                color: #25bc6d;
            }
            &>button{
                height: 38px;
                padding: 0 104px;
                font-size: 16px;
                color: #fff;
                border-radius: 6px;
                background-color: #25bc6d;
            }
        }
        ul{
            padding: 0 30px;
            li{
                font-size: 14px;
                color: #666666;
                padding:9px 0;
            }
        }
        &:nth-child(2){
            .title{
                background-color: #4e8dff;
            }
            div{
                &>b{
                    color: #4e8dff;
                }
                &>button{
                    background-color: #4e8dff;
                }
            }
        }
        &:nth-child(3){
            .title{
                background-color: #655dff;
            }
            div{
                &>b{
                    color: #655dff;
                }
                &>button{
                    background-color: #655dff;
                }
            }
        }
    }
}
</style>